<template>
    <div class="news">
        <van-nav-bar title="消息中心" left-arrow @click-left="goBack"/>
        <div class="list">
         
                <div class="list-item">
                    <ul>
                        <router-link  v-for="item in newList" :key="item.id" tag="li" :to="{name: 'newDetails',params:{
                            id:item.id,
                            msg:item.content,
                            time:item.createTime 
                            }}">
                            <div class="details">
                                <div :class="item.messageStatus==0?'spot':'spotTwo'"></div>
                                <div class="content">
                                    <p class="content-title">
                                        <span class="title">消息中心</span>
                                    </p>
                                    <p class="content-date">
                                        <span class="form-date">2019-04-18</span>
                                    </p>
                                </div>
                            </div>
                        </router-link>
                    </ul>
                </div>
        </div>

        <p v-if="flagBtm" style="font-size: 10px; color: rgb(204, 204, 204); margin: 10px 0;">没有了！！！</p>

    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import {
    NavBar,
    List,
    Cell,
    CellGroup
} from "vant"
import {
    list
} from "../../axios/api.js"
export default {
    components: {
        [NavBar.name]: NavBar,
        [List.name]: List,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup
    },
    data() {
        return {
            newList: [],
            pages:1,
            loading: false,
            finished: false,
            flagBtm:false,
        }
    },
    created(){
        this.onLoad();
        this.downUp();
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        onLoad() {
            var that = this;
            that.loading = true;
            list({
                params: {
                    page:that.pages,
                    rows:8
                }
            }).then(res => {
                console.log(res.data.data)
                if(res.data.data.length == 0){
                    that.flagBtm = true;
                    return false;
                }else{
                    that.newList = res.data.data;
                }
            })
        },
        //上拉加载
    downUp(){
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.pages++;
            console.log(that.pages)
            list({
                params: {
                    page:that.pages,
                    rows:8
                }
            }).then(res => {
                if(res.data.data.length <= 0){
                    that.flagBtm = true;
                    return false;
                }else{
                    for(var i=0 ; i < res.data.data.length ; i++){
                    that.newList.push(res.data.data[i])
                    }
                }
                console.log(that.newList,88888)
            })
          }
        });
    },
    }
}
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.news {
    height: 100%;
    background: #fff;
    overflow: hidden;
    .list {
        .list-item {
            li {
                padding: 10px 0;
                line-height: 24px;
                text-align: left;
                border-bottom: @base_boder;
                font-size: @base_textSize;
                color: @base_textColor;
                .details {
                    display: flex;
                    .spot {
                        display: inline-block;
                        vertical-align: top;
                        margin: 10px;
                        width: 8px;
                        height: 8px;
                        background: @theme_background;
                        border-radius: 50%;
                    }
                    .spotTwo{
                        display: inline-block;
                        vertical-align: top;
                        margin: 10px;
                        width: 8px;
                        height: 8px;
                        background:#ccc;
                        border-radius: 50%;
                    }
                    .content {
                        display: inline-block;
                        flex: 1;
                        &>p {
                            width: 100%;
                            word-break: keep-all;/* 不换行 */
                            white-space: nowrap;/* 不换行 */
                            overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */
                            text-overflow: ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
                        }
                        .form-date {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
</style>